<template>
	<view class="table">
		<my-login v-if="status !== 200">
			<image class="images" style="width: 100%;" src="../../static/myself/组23@2x.png" mode=""></image>
			<view class="table1" @click="navigate('login/login')">
				<view class="touch">
					<image src="../../static/myself/头像@2x.png" mode="widthFix"></image>
					<p class="white">请登录</p>
				</view>
			</view>
			<!-- 资金 -->
			<view class="capital">
				<view class="capital1" @click="navigate('login/login')">
					<p class="p_text">余额</p>
					<view class="sum">0</view>
				</view>

				<view class="capital1" @click="navigate('login/login')">
					<p class="p_text">会员卡</p>
					<view class="sum">0</view>
				</view>
				<view class="capital1" @click="navigate('login/login')">
					<p class="p_text">积分</p>
					<view class="sum">0</view>
				</view>
			</view>
		</my-login>
		<my-userinfo v-else>
			<image class="images" style="width: 100%;" src="../../static/myself/组23@2x.png" mode=""></image>
			<view class="table1">
				<view class="touch">
					<image src="../../static/myself/头像@2x.png" mode="widthFix" v-if="!user.img"></image>
					<image :src="user.img" mode="widthFix" style="border-radius: 50%;" v-else></image>
					<view>
						<p class="white" style="font-size: 40rpx;">{{user.userName}}</p>
						<view @click="btn">
							<p style="color: white;text-decoration: underline;">退出登录</p>
						</view>
					</view>
				</view>
			</view>
			<!-- 资金 -->
			<view class="capital">
				<view class="capital1" @click="navigate('wallet/wallet')">
					<p class="p_text">余额</p>
					<view class="sum">{{user.balance}}</view>
				</view>

				<view class="capital1" @click="navigate('member/huiyuanka')">
					<p class="p_text">会员卡</p>
					<view class="sum">{{user.vip}}</view>
				</view>
				<view class="capital1" @click="navigate('myself/integral')">
					<p class="p_text">积分</p>
					<view class="sum">{{user.integral}}</view>
				</view>
			</view>
		</my-userinfo>
		<!-- 图鉴 -->
		<view style="display: flex;background-color: white;padding: 40rpx;justify-content: space-between;">
			<view @click="dingdan">
				<image style="width:100rpx;height: 100rpx;" src="../../static/myself/组23@2x(1).png"></image>
				<view class="num">
					我的订单
				</view>
			</view>
			<view @click="opentwo">
				<image style="width:100rpx;height: 100rpx;" src="../../static/myself/图层2017@2x.png"></image>
				<view class="num">
					在线客服
				</view>
			</view>
			
			<view @click="navigate('car/car')">
				<image style="width:100rpx;height: 100rpx;" src="../../static/myself/组23@2x(3).png"></image>
				<view class="num">
					我的车辆
				</view>
			</view>
			<view @click="navigate('myself/user-washcard')">
				<image style="width:100rpx;height: 100rpx;" src="../../static/myself/组23@2x(4).png"></image>
				<view class="num">
					洗车教程
				</view>
			</view>
		</view>
		<!-- 功能 -->
		<!-- <view class="functionality">
			<view @click="clickNum"  class="functionality1" v-for="(item,i) in functionality" key="i">
				<image style="width:60rpx;height: 60rpx;" :src="item.msg" mode=""></image>
				<view class="num">
					{{item.num}}
				</view>
			</view>
		</view> -->
		<view class="functionality">

			<button class="functionality2" @click="navigate('myself/balance')">
				<image style="width:100rpx;height: 100rpx;" src="../../static/myself/图层2029@2x.png"></image>
				<view>关于我们</view>
			</button>
			<button class="functionality2" @click="navigate('myself/almost')">
				<image style="width:100rpx;height: 100rpx;" src="../../static/myself/图层2033@2x.png"></image>
				<view>积分抽奖</view>
			</button>
			

			
			<button class="functionality2" @click="navigate('car/fankui')">
				<view>
					<image style="width:100rpx;height: 100rpx;" src="../../static/icon/bj.svg"></image>
				</view>
				意见反馈
			</button>
			<button class="functionality2" @click="navigate('study/study')">
				<view>
					<image style="width:100rpx;height: 100rpx;" src="../../static/icon/jc.svg"></image>
				</view>
				洗车帮助
			</button>
			<button class="functionality2" @click="navigate('share/share')">
				<image style="width:100rpx;height: 100rpx;" src="../../static/icon/share.svg"></image>
				<view>分享赚钱</view>
			</button>
			<button class="functionality2" @click="open">
				<image style="width:100rpx;height: 100rpx;" src="../../static/myself/图层2003@2x.png"></image>
				<view>兑换码</view>
			</button>
			<uni-popup ref="popupo" type="center">
				<view class="popup_dui">
					<h3 class="h3">兑换码</h3>
					<input class="int" type="text" v-model="redeemcode" placeholder="请输入兑换码">
					<button class="button" @click="duihuan">立即兑换</button>
				</view>
			</uni-popup>
			
		</view>
		

	</view>

</template>

<script>
	// import {ref} from "vue"
	export default {
		data() {
			return {
				token: "",
				user: "",
				userinfo: '',
				status: "",
				redeemcode: ''
			}
		},

		methods: {
			dingdan() {
				uni.switchTab({
					url: "/pages/list/list"
				})
			},
			navigate: function(uri) {
				uni.navigateTo({
					url: `/pages/${uri}`
				})
			},
			open() {
				// console.log(this.$refs);
				this.$refs.popupo.open('center')
			},
			opentwo() {

				uni.navigateTo({
					url: 'kefu'
					
				});
			},
			btn() {
				uni.showToast({
					title: '退出成功',
					icon: 'success'
				});
				uni.removeStorage({
					key: "token",
					success() {
						uni.switchTab({
							url: "/pages/car/cart",
						})
					}
				})

			},
			duihuan() {
				uni.request({
					url: 'http://127.0.0.1:9000/redeemcode/useRedeemCode?redeem_code_id=' + this.redeemcode,
					method: 'POST',
					header: {
						"Authorization": this.token
					},
					data: {

					}
				}).then(
					(res) => {
						console.log(res.data);

						if (res.data.code == 200) {
							uni.showToast({
								title: "兑换成功"
							})
							this.user.integral += 200
							console.log(this.user.integral);
							uni.request({
								url: 'http://127.0.0.1:9000/user/update',
								method: 'POST',
								header: {
									"Authorization": this.token
								},
								data: this.user
							}).then(
								(res) => {
									console.log(res.data);

								}
							)

							uni.reLaunch({
								url: './myself'
							})

						} else {
							uni.showToast({
								title: "兑换失败",
								icon: "error"
							})
						}
					}
				)
			}
		},
		onShow() {
			//token 
			//  uni.getStorage({
			// 	key: "token"
			// }).then(res => {
			// 	this.token = res.data
			// })
			this.token = uni.getStorageSync("token")
			var that = this
			uni.request({
				method: "POST",
				url: "http://127.0.0.1:9000/user/findOneUser",
				header: {
					Authorization: this.token
				},
				success(res) {
					console.log(res)
					if (res.data.status !== 200 && res.data.code !== 200) {
						console.log("没登录")
						that.status = res.data.status
					}
					if (res.data.code === 200) {
						console.log('登录了')
						const {
							data: {
								data: {
									user: user
								}
							}
						} = res
						that.user = user
						that.status = res.data.code
					}
				}
			})
		}

		// actions:{
		//         getUserInfoAsync(context,payload){
		//             let token = {token:context.state.token};
		//             uni.request({
		//                 url:"http://127.0.0.1:9000/user/findOneUser",
		//                 header:{
		//                     "Authorization":context.state.token
		//                 },
		//                 data:{token:context.state.token},
		//                 success:(res)=>{
		//                     console.log('res',res);
		//                     if(res.statusCode == 401){
		//                         uni.showToast({
		//                             title:"token已经过期重新登录",
		//                             success() {
		//                                 context.commit('saveUserInfo',{})
		//                                 context.commit('removeToken','')
		//                                 uni.switchTab({
		//                                     url:'/pages/car/cart'
		//                                 })
		//                             }
		//                         })
		//                     }
		//                 }
		//             })
		//         }
		//     }
	}
</script>

<style lang="less">
	.table {
		height: 200rpx;

		.images {
			position: absolute;
			left: 0;
			tap: 0;
			display: block;
			height: 615rpx;
			z-index: -999;
		}

		.table1 {
			display: flex;
			width: 100%;

			.touch {
				display: flex;
				width: 60%;
				padding: 40rpx;

				image {
					width: 150rpx;
					height: 150rpx;
					margin-right: 40rpx;

				}

				.white {
					color: white;
					font-size: 18px;
					font-weight: 500;
					letter-spacing: 2px;
					padding-top: 20rpx;
				}
			}

			.btn {
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				margin-top: 60rpx;
				margin-right: 60rpx;

			}

			// .fen{
			// 	height:90rpx;
			// 	padding: 80rpx 0;

			// 	.ju{

			// 		width: 250rpx;
			// 		padding-right: 0;
			// 		position: absolute;
			// 		right: 0;
			// 		display: block;
			// 		height: 100%;
			// 		z-index: -999;
			// 	}
			// 	.ji{
			// 		width: 25rpx;
			// 		padding-right: 10rpx;
			// 	}
			// 	text{
			// 		color: white;
			// 		font-size: 13px;
			// 		letter-spacing: 1px;
			// 		line-height: 80rpx;

			// 	}
			// }
		}

		.capital {
			display: flex;
			justify-content: space-around;
			width: 90%;
			height: 100rpx;
			margin: 40rpx 40rpx;

			.capital1 {
				text-align: center;
				color: white;

				.p_text {
					font-size: 13px;
				}

				.sum {
					height: 100rpx;
					line-height: 100rpx;
					// border-right: 1rpx solid red;
					font-size: 18px;
					font-weight: 600;
				}
			}
		}

		.picture {
			display: flex;
			justify-content: space-around;
			text-align: center;
			width: 90%;
			height: 170rpx;
			background-color: #FBFBFB;
			border-radius: 20rpx;
			margin: 80rpx 20rpx;
			padding: 20rpx;

			.picture1 {
				width: 25%;
				text-align: center;
			}

			.num {
				width: 168rpx;
				height: 80rpx;
				line-height: 80rpx;

			}
		}

		.functionality {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 50rpx 20rpx;
			padding: 20rpx;

			.popup_dui {
				width: 600rpx;
				height: 400rpx;
				background-color: #fff;
				border-radius: 10px;

				.h3 {
					text-align: center;
					font-size: 22px;
					padding-top: 20px;
				}

				.int {
					padding: 20px 10px;
					color: #6E6E6E;
				}

				.button {
					width: 500rpx;
					border-radius: 15px;
					background-color: #0C7DFF;
					color: white;
				}
			}

			.popup-phone {
				width: 600rpx;
				height: 250rpx;
				background-color: #fff;
				border: 1px solid red;
				border-radius: 25px;

				.phones {
					padding: 20px;
				}

				.human {
					padding-left: 20px;
					height: 100rpx;
					line-height: 100rpx;

				}
			}

			.functionality2 {
				width: 30%;
				margin: 0;
				padding: 0;
				font-size: 12px;
				background-color: white;
				color: #6c757d;
				line-height: 1.8;
			}

			.functionality2::after {
				border: 0;
			}

		}
	}
</style>
